<!-- -->
<template>
  <div class='menu'>
    <div class="top">
      <el-icon><HomeFilled /></el-icon>
      <span>&nbsp;/&nbsp;医院详情</span>
    </div>
    <el-menu
      :default-active="route.path"
      :router='true'
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
    >
      <el-menu-item index="/hospitalDetail/register" @click="changeActive('/hospitalDetail/register')">
        <template #title>
          <el-icon><icon-menu /></el-icon>
          <span>预约挂号</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/hospitalDetail/detail" @click="changeActive('/hospitalDetail/detail')">
        <el-icon><Document /></el-icon>
        <template #title>医院详情</template>
      </el-menu-item>
      <el-menu-item index="/hospitalDetail/notice" @click="changeActive('/hospitalDetail/notice')">
        <el-icon><InfoFilled /></el-icon>
        <template #title>预约须知</template>
      </el-menu-item>
      <el-menu-item index="/hospitalDetail/close" @click="changeActive('/hospitalDetail/close')">
        <el-icon><Message /></el-icon>
        <template #title>停诊信息</template>
      </el-menu-item>
      <el-menu-item index="/hospitalDetail/search" @click="changeActive('/hospitalDetail/search')">
        <el-icon><Search /></el-icon>
        <template #title>查询/取消</template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang='ts'>
import {Document,Menu as IconMenu,Message,InfoFilled,Search, HomeFilled} from '@element-plus/icons-vue'
import { ref, reactive, onMounted } from 'vue'

import { useHospitalDetailStore } from '@/stores/hospitalDetail';
const hospitalDetailStore = useHospitalDetailStore();





import { useRoute } from 'vue-router'
import router from '@/router';
const route = useRoute()
console.log(route);


const isCollapse = ref(false)

const changeActive = (path: string) => {
  router.push({
    path,
    query: {
      hoscode: route.query.hoscode
    }
  })
  console.log(2323);
  
}

onMounted(() => {
  hospitalDetailStore.changeHospitalInfo(route.query.hoscode as string)
  hospitalDetailStore.getDeparment(route.query.hoscode as string)
})

</script>

<style lang='scss' scoped>
.menu {
  width: 240px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: self-start;
  .top {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 44px 0 20px;
    color: #7f7f7f;
  }
}
</style>
